<template>
  <div>
    <Row>
      <Col :span="19" class="form-box">
        <Form ref="form" :label-width="100" inline>
          <FormItem label="选择类型">
            <Select v-model="state" style="width: 200px">
              <Option value="0">全部类型</Option>
              <Option value="1">请求类型</Option>
              <Option value="2">操作类型</Option>
              <Option value="3">异常类型</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">查询</Button>
          </FormItem>
        </Form>

        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData"
                 @on-row-click="showInfo" no-data-text="未查询到数据">
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
      <Col :span="5" style="display: flex">
        <div class="show">详细信息: {{ text }}</div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "log",
  data() {
    return {
      state: '',
      startTime: '',
      endTime: '',
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      text: '无'
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    times(val) {
      this.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    getCols() {
      return [
        {title: '记录名', key: 'name', tooltip: true, align: 'center', width: 250},
        {title: '记录时间', key: 'time', tooltip: true, align: 'center', width: 200},
        {title: '请求参数', key: 'params', tooltip: true, align: 'center', width: 200},
        {title: '异常信息', key: 'exception', tooltip: true, align: 'center'},
        {title: '详细信息', key: 'info', align: 'center',tooltip: true, width: 200},
        {
          title: '日志类型', key: 'type', tooltip: true, align: 'center', width: 150, render(h, obj) {
            let type = "默认类型"
            if (type === "1") {
              type = "请求类型"
            } else if (type === "2") {
              type = "操作类型"
            } else if (type === "3") {
              type = "异常类型"
            }
            return h(('div'), type);
          }
        }
      ]
    },
    search() {
      this.loadData()
    },
    loadData() {
      let that = this;
      let params = {}
      params.startTime = this.startTime
      params.endTime = this.endTime
      params.state = this.state
      params.pageNum = this.pageNum
      params.pageSize = this.pageSize
      that.$http.postJson('/log/list', params).then(res => {
        that.tableData = res.data
        if (res.data.length > 0) {
          this.text = res.data[0].info
        } else {
          this.text = ""
        }
        that.pageSize = res.pageSize
        that.pageNum = res.pageNum
        that.total = res.total
      })
    },
    pageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    showInfo(row) {
      this.text = row.info
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}

.show {
  width: calc(100% - 20px);
  margin: 20px 10px 0 10px;
  height: 800px;
  overflow-y: auto;
  word-wrap: break-word;
}
</style>
